<template>
  <div class="recharge">
    <div class="recharge-tests">
      <div >
        充值余额
        <p>￥{{memberDetails.cz_yuE}}</p>
      </div>
    </div>

    <div class="balan">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="getDeposit"
      >

        <div v-if="typeof lis=='string'" class="listDatasno" style="color:#ddd;padding:10px 0;">{{lis}}</div>
        <div v-else v-for="(v,idx) in lis" :key="idx" style="padding:5px 0;border-bottom:1px solid #ddd;background: #fff;">
          <van-row class="b-lists">
            <van-col v-if="v.remarks.length==0" span="16" style="padding:3px 10px;text-align: left;color:#ddd">
              暂无备注信息
            </van-col>
            <van-col v-else span="16" style="padding:3px 10px;text-align: left;">
              备注:{{v.remarks}}
            </van-col>
            <van-col span="8" style="padding:3px 10px;text-align: right">
              <span v-if="v.price>0" class="b-lists-money">{{v.price}}元</span>
              <span v-else class="b-lists-money2">{{v.price}}元</span>
            </van-col>
          </van-row>
          <van-row>
            <van-col span="24" class="b-lists-time">{{v.dates}}</van-col>
          </van-row>
        </div>
        <div class="noDatas" :style="{display:block}">
          数据已加载完
        </div>
      </van-list>

    </div>

    <!--返回按钮-->
    <van-button class="recharge-back" @click="onClickLeft">
      <i class="iconfont icon-icon_reply" style="display: block"></i>
      返回
    </van-button>
  </div>
</template>

<script>
  import { mapState } from 'vuex';
    export default {
        name: "recharge",
        data () {
          return{
            currentPage:1,
            lis:[],
            block: 'none',
            pagesize:10,
            page:0,
            Totals:0,

            loading: false,
            finished: false
          }
        },
      computed: {
        ...mapState({
          memberDetails:"data"
        })
      },
      methods:{
        getDeposit(){
          var $this=this;
          //recharge/32894/showvip
          this.$http.member.get('/recharge/'+this.$store.state.data.memberID+'/showvip',{
            params:{
              page:$this.currentPage,
              pageSize:$this.pagesize
            }
          })
            .then(function (response) {

              // console.log(response.data.data);
              $this.currentPage=response.data.data.current_page+1;//获取当前的下一页
              var objs=response.data.data.data;

              for(var i=0;i<objs.length;i++){
                if(objs[i].in=="0.00"||objs[i].in==""){
                  if(objs[i].out.indexOf("-")==-1){
                    objs[i].price=0;
                  }else{
                    objs[i].price=objs[i].out;
                  }
                }else if(objs[i].out=="0.00"||objs[i].out==""){
                  objs[i].price="+"+objs[i].in;
                }

                $this.lis.push(objs[i]);

              }
              $this.loading = false;
              if(!objs.length){
                $this.lis="暂无记录";
                $this.finished = true;
              }else if ($this.lis.length >= response.data.data.total) {
                $this.finished = true;
                $this.block = 'block'
              }


            })
            .catch(function (error) {
              console.log(error);
            });
        },
        onClickLeft() {
          this.$router.push({name: 'memberDetails',params:{
              url:this.$store.state.data.path,
              vipId:this.$store.state.data.memberID
            }});
          // this.$router.go(-1);
        }

      }
    }
</script>

<style scoped>
  .recharge{
    font-size:12px;
    color:#666;
  }
  .recharge .recharge-tests{
    display: flex;
    padding:10px 0;
    background-color: #0D90EB;
    position: fixed;
    top:0;
    left:0;
    width:100%;

  }
  .recharge .recharge-tests>div{
    width:100%;
    color:#fff;
    font-weight: bold;
    font-size: 16px;
  }
  .recharge-tests>div>p{
    margin:5px 0;
  }
  .recharge .balan{
    margin-top:82px;
  }
  .recharge-back{
    position: fixed!important;
    bottom:100px!important;
    right:10px!important;
    background:rgba(0,0,0,.5)!important;
    width:55px!important;
    height:auto!important;
    color:#fff!important;
    font-size:12px!important;
    padding:12px 0!important;
    border-radius: 5px!important;
    line-height: initial!important;
    border:0!important;
  }
  .recharge-back .iconfont{
    font-size:12px;
  }

  .b-lists{
    font-size:12px;color:#666
  }
  .b-lists-money{
    color:#01A761;font-size:16px;font-weight: bold
  }
  .b-lists-money2{
    color:red;font-size:16px;font-weight: bold
  }
  .b-lists-time{
    padding:3px 10px;text-align: left;font-size:12px;
  }
</style>
